import { Form, Input, Button, Card, message } from 'antd';
import { SendReqReg } from "../vo/request"
import { SolutionOutlined } from '@ant-design/icons';
import "./register.less"
import { useState } from 'react';
export const RegisterF = () => {
    const [flag, setFlag] = useState(false);
    const [form] = Form.useForm();
    function sleep(time:number) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }
    const onFinished = async (values: any) => {
        console.log("ewd");
        let res = await SendReqReg(values);
        if (res.data) { 
            message.success("注册成功！");
            sleep(1500).then(() => {
                window.location.replace("/index/user/login");
            });
            
        } else {
            setFlag(false);
            message.error(res.msg);
            
        }
    };
    return (
        <div className="register">
            <div className="registerCon">
                <Card>
                    <SolutionOutlined style={{height:"3vw", fontSize:"25px"}} />
                    <Form
                        form={form}
                        name="register"
                        onFinish={onFinished}
                    >
                        <Form.Item
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: "用户名长度为3~16位",
                                    pattern: /^\s*([^\s]\s*){3,16}$/
                                }
                            ]}
                        >
                            <Input placeholder="请输入用户名(3~16位字符)" />

                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: "密码长度为6~16位",
                                    pattern: /^\s*([^\s]\s*){6,16}$/
                                }
                            ]}
                        >
                            <Input placeholder="请输入密码(6~16位字符)" />
                        </Form.Item>
                        {/* <Form.Item
                            name="identifyNum"
                            rules={[
                            {
                            required:true,
                            message:" "
                            }
                            ]}
                        >
                        <Input placeholder="请输入验证码"/>
                        <Button type="primary">获取验证码</Button>
                        </Form.Item> */}
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="registerButton"
                                loading={flag}
                                onClick={()=>{
                                    setFlag(true);
                                }}
                            >
                                注册
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>

        </div>

    )
}

